<template>
  <div class="school-activities">
    <nav-header></nav-header>
    <div class="zh-table">
      <div class="zh-table-open clear">
        <div class="zh-open-left fl">
          <div class="open-width" style="width: 140px">
            <el-select v-model="listParam.levelType" filterable placeholder="请选择">
              <el-option
                v-for="(item, index) in typeOptons"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="open-width" style="width: 140px">
            <el-select v-model="listParam.status" filterable placeholder="请选择">
              <el-option
                v-for="(item, index) in statusOptons"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="open-width" style="width: 220px">
            <el-date-picker
              v-model="listParam.pickerTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator=" - "
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="open-width">
            <el-input
              v-model="listParam.keyword"
              @keyup.enter.native="searchFunc"
              placeholder="主题、地点、联系人"
            ></el-input>
          </div>
          <el-button type="primary" @click="searchFunc">搜索</el-button>
          <el-button type="primary" @click="resetList">重置</el-button>
        </div>
        <div class="zh-open-right fr">
          <el-button type="primary" @click="initiateActivity">发起活动</el-button>
          <el-button type="danger" @click="dleteAllConfirm">批量删除</el-button>
        </div>
      </div>

      <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
        <el-table
          :data="listData"
          fixed
          border
          max-height="600"
          @selection-change="tableSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="50" align="center" fixed></el-table-column>
          <el-table-column
            prop="name"
            label="活动主题"
            align="center"
            width="318"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="organizer"
            label="发起人"
            align="center"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="活动时间" width="230" align="center" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.start_time + " 至 "+ scope.row.end_time }}</template>
          </el-table-column>
          <el-table-column label="活动类型" align="center" width="160" show-overflow-tooltip>
            <template
              v-if="scope.row.level_type"
              slot-scope="scope"
            >{{ typeOptons[+scope.row.level_type].label }}</template>
          </el-table-column>
          <el-table-column
            prop="place"
            label="活动地点"
            align="center"
            width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="responsibler"
            label="活动联系人"
            align="center"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="telephone"
            label="联系电话"
            align="center"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="show_status_text"
            label="活动状态"
            align="center"
            width="88"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status=='1'"
                @click="setTop(scope.row.id)"
                type="text"
              >{{scope.row.top=='1'?'取消置顶':'置顶'}}</el-button>
              <el-button @click="goDetail(scope.row.id)" type="text">详情</el-button>
              <el-button
                v-if="scope.row.status=='2'"
                @click="approveActivity(scope.row.id,1)"
                type="text"
              >通过</el-button>
              <el-button
                v-if="scope.row.status=='2'"
                @click="approveActivity(scope.row.id,3)"
                type="text"
                class="delete-button"
              >拒绝</el-button>
              <el-button
                v-if="scope.row.reason!=''"
                @click="rejectRow(scope.row.reason)"
                type="text"
                class="delete-button"
              >拒绝理由</el-button>
              <el-button @click="delActivity(scope.row.id)" type="text" class="delete-button">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="table-pagination" v-show="totalNumber > 10">
          <el-pagination
            @size-change="changeCurrentSize"
            @current-change="changeCurrentPage"
            :current-page="listParam.pageIndex"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="listParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNumber"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="拒绝"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="450px"
    >
      <span>{{rejectReason}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const defaultParam = {
  levelType: "-1", //活动类
  status: "-1", //活动状态
  pickerTime: [], //搜索条件的开始-结束日程
  keyword: "", //搜索的关键字
  // 分页：
  pageIndex: 1,
  pageSize: 10
};
export default {
  data() {
    return {
      typeOptons: [
        {
          value: "-1",
          label: "全部类型"
        },
        {
          value: "1",
          label: "校级活动"
        },
        {
          value: "2",
          label: "年级活动"
        },
        {
          value: "3",
          label: "班级活动"
        }
      ],
      statusOptons: [
        {
          value: "-1",
          label: "全部状态"
        },
        {
          value: "1",
          label: "报名中"
        },
        {
          value: "2",
          label: "进行中"
        },
        {
          value: "3",
          label: "已结束"
        },
        {
          value: "4",
          label: "已通过"
        },
        {
          value: "5",
          label: "未审核"
        },
        {
          value: "6",
          label: "已拒绝"
        }
      ],
      userId: this.$g.user_id,
      // 获取活动列表接口的参数
      listParam: Object.assign({}, defaultParam),
      totalNumber: 0,
      selected: [], // 选中的数据
      listData: [{}],
      loading: {
        status: false,
        txt: "获取数据..."
      },
      rejectReason: "", //拒绝理由
      dialogVisible: false //拒绝理由弹窗
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 获取活动列表
     */
    getList() {
      this.loading.status = true;
      let success = res => {
        this.loading.status = false;
        this.listData = res.data.data;
        this.totalNumber = res.data.data_sum;
      };
      let params = {
        page_index: this.listParam.pageIndex,
        page_size: this.listParam.pageSize,
        level_type: this.listParam.levelType,
        status: this.listParam.status,
        start_time: this.listParam.pickerTime[0],
        end_time: this.listParam.pickerTime[1],
        keyword: this.listParam.keyword,
        user_id: this.userId
      };
      this.$ajax.get("api/competition/activity", {
        params,
        func: { success: success }
      });
    },
    /**
     * 搜索列表
     */
    searchFunc() {
        this.listParam.pageIndex = 1;
        this.getList();
    },
    /**
     * 搜索条件重置
     */
    resetList() {
      this.listParam = Object.assign({}, deep_clone(defaultParam));
      this.getList();
    },
    /**
     * 置顶/取消置顶
     * @param {Number} val 要删除数据的 id
     */
    setTop(id) {
      let success = res => {
        this.getList();
      };
      this.$ajax.post(
        "api/competition/activity_top",
        {
          id: id
        },
        { func: { success: success } }
      );
    },
    /**
     * 是否删除该数据
     * @param {Number} val 要删除数据的 id
     */
    delActivity(val) {
      let yes = res => {
        this.deleteData(val);
      };
      let cancel = res => {};
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "删除后不可恢复，确认删除吗？"
      });
    },
    /**
     * 删除数据
     * @param {Number/Array} 要删除数据的 id
     */
    deleteData(id) {
      let success = res => {
        this.$message.success(res.msg);
        this.getList();
      };
      let fail = res => {
        this.$message.error(res.msg);
        this.getList();
      };
      let params = {
        id: id,
        type: 2,
        user_id: this.$g.user_id
      };

      this.$ajax.delete("/api/competition/activity", {
        params,
        func: { success: success, fail: fail }
      });
    },
    /**
     * 查看拒绝理由
     */
    rejectRow(val) {
      this.rejectReason = val;
      this.dialogVisible = true;
    },
    /**
     * 跳去活动详情页
     * @param {Number} id 活动 id
     */
    goDetail(id) {
      this.$router.push("/life/events/activity-details/" + id);
    },
    /**
     * 发起活动
     */
    initiateActivity() {
      this.$router.push("/life/events/initiate-activities");
    },

    /**
     * 活动审批
     *status 1：通过；3：拒绝
     */
    approveActivity(id, status) {
      this.reason = "";
      let params = {
        id: id,
        status: status,
        reason: this.reason
      };
      if (status == 3) {
        this.$prompt("", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "messageBox",
          inputType: "textarea",
          inputPlaceholder: "请输入拒绝理由",
          inputPattern: /^[\S]{1,140}$/,
          inputErrorMessage: "拒绝理由不能为空，且不能超过140个字符"
        })
          .then(({ value }) => {
            if (is_empty(value)) {
              this.$message.warning("请输入拒绝理由");
            } else {
              this.reason = value;
              params.reason = value;
              this.change(params);
            }
          })
          .catch(() => {});
      } else {
        this.change(params);
      }
    },
    change(params) {
      let success = data => {
        this.$message.success(data.msg);
        this.getList();
      };
      this.$ajax.post("api/competition/activity_approve", params, {
        func: { success: success }
      });
    },
    /**
     * 是否确定批量删除
     */
    dleteAllConfirm() {
      if (this.selected.length === 0) {
        this.$message.warning("请选择要删除的项");
        return false;
      }

      let yes = res => {
        let ids = [];
        this.rowLen = this.selected.length;

        this.selected.forEach(item => {
          ids.push(item.id);
        });

        this.deleteData(ids);
      };
      let cancel = res => {};

      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定要删除选中的项吗？"
      });
    },

    /**
     * 列表数据多选
     * @param {Array} val 选中数据的数组
     */
    tableSelectionChange(val) {
      this.selected = val;
    },
    /**
     * 设置每页中显示的数据数量
     * @param {Number} val 每页数据条数
     */
    changeCurrentSize(val) {
      this.listParam.pageIndex = 1;
      this.listParam.pageSize = val;

      this.getList();
    },
    /**
     * 切换到第几页数据
     * @param {Number} val 页数
     */
    changeCurrentPage(val) {
      this.listParam.pageIndex = val;

      this.getList();
    }
  }
};
</script>

<style lang="scss">
.school-activities {
  .open-width {
    .el-date-editor {
      width: 100%;
      vertical-align: middle;
    }
  }
  .el-dialog__wrapper .el-dialog__footer {
    padding: 40px 20px 30px;
  }
}
.messageBox {
  border: none;
  .el-message-box__header {
    background-color: #338efc;
    padding: 12px 20px 12px;
  }

  .el-message-box__title {
    color: #fff;
    font-size: 16px;
  }
  .el-textarea__inner {
    min-height: 126px !important;
  }
  .el-message-box__headerbtn {
    top: 8px;
  }

  .el-message-box__headerbtn .el-icon-close {
    color: #fff;
    font-size: 24px;
  }

  .el-message-box__headerbtn .el-icon-close:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>